import { View } from "@tarojs/components";
import React from "react";
import styles from "./index.module.scss";
import { Checked } from "@nutui/icons-react-taro";
function TimeLine() {
  const aa = [1, 2, 3, 4, 5];
  return (
    <View className={styles["time-line-wrapper"]}>
      <View className={styles["title"]}>申诉进程</View>

      <View className={styles["steps"]}>
        {aa.map((item, index) => (
          <View className={styles["step"]} key={index}>
            <View className={styles["line"]}></View>
            <View className={styles["head"]}>
              <View className={styles["info"]}>
                <View className={styles["photo"]}>白</View>
                <View className={styles["status"]}>
                  {index % 2 ? (
                    <View className={styles["pricessing"]}></View>
                  ) : (
                    <Checked size=".8rem" />
                  )}
                </View>
              </View>
            </View>
            <View className={styles["main"]}>
              <View className={styles["main-head"]}>
                <View className={styles["main-content"]}>
                  <View className={styles["main-name"]}>白白白</View>
                  <View className={styles["main-label"]}>发起申诉</View>
                </View>

                <View className={styles["main-date"]}>09-23 12:09:08</View>
              </View>
              <View className={styles["main-desc"]}>
                驳回原因原因原因原因原因原因原因原因原因原因原因原因原因原因原因原因原因原因原因原因原因原因原因原因
              </View>
            </View>
          </View>
        ))}
      </View>
    </View>
  );
}

export default TimeLine;
